<template>
  <div class="box">
    <p class="p_title">
      <el-button type="text" style="float: left;color: #000;font-size: 16px">新建模板信息</el-button>
    </p>
    <table style="width: 100%;margin: 0 015px 0;" class="personalTable" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td>系统管理权限</td>
        <td colspan="11">
          <span class="span" v-for="item in dirRightList">{{item.name}}</span>
          <span class="span1" v-if="!dirRightList.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>项目报建权限</td>
        <td colspan="11">
          <span class="span" v-for="item in Box1">{{item.name}}</span>
          <span class="span1" v-if="!Box1.length">{{'暂无数据'}}</span>
        </td>
      </tr>
      <tr>
        <td>设计方案权限</td>
        <span class="span" v-for="item in Box2">{{item.name}}</span>
        <span class="span1" v-if="!Box2.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>施工许可权限</td>
        <span class="span" v-for="item in Box3">{{item.name}}</span>
        <span class="span1" v-if="!Box3.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收权限</td>
        <span class="span" v-for="item in Box4">{{item.name}}</span>
        <span class="span1" v-if="!Box4.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>咨询服务权限</td>
        <span class="span" v-for="item in Box5">{{item.name}}</span>
        <span class="span1" v-if="!Box5.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>掘占路等咨询</td>
        <span class="span" v-for="item in Box6">{{item.name}}</span>
        <span class="span1" v-if="!Box6.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>竣工验收提前查看</td>
        <span class="span" v-for="item in Box7">{{item.name}}</span>
        <span class="span1" v-if="!Box7.length">{{'暂无数据'}}</span>
      </tr>
      <tr>
        <td>事中事后监管权限</td>
        <span class="span" v-for="item in Box8">{{item.name}}</span>
        <span class="span1" v-if="!Box8.length">{{'暂无数据吧'}}</span>
      </tr>
      <tr>
        <td>掘占路等许可权限</td>
        <span class="span" v-for="item in Box9">{{item.name}}</span>
        <span class="span1" v-if="!Box9.length">{{'暂无数据'}}</span>
      </tr>
    </table>
  </div>
</template>

<script>
  import {$aos} from '../../../store/state';
  import {http} from '../../../assets/commonjs/axios';
  import {templateType} from '../../../assets/commonjs/utils';


  export default {
    name: "templateEdit",
    data() {
      return {
        id: null,
        Box1: [],
        Box2: [],
        Box3: [],
        Box4: [],
        Box5: [],
        Box6: [],
        Box7: [],
        Box8: [],
        Box9: [],
        dirRightList: [],
      }
    },
    created() {
      $aos.getItem('templateData').then(res => {
        this.CheckInformation(res.id);
        this.id = res.id;
      });
    },
    methods: {
      CheckInformation(id) {
        http('post', 'permission/operate_model', {
          applyType: 4,
          id: id
        }).then(res => {
          if (res.data.code === 200) {
            let list = res.data.data;
            let opeRightList = list.opeRightList;
            if (list.dirRightList.length > 0) {
              this.dirRightList = list.dirRightList;
            }
            if (opeRightList.length > 0) {
              opeRightList.forEach((item) => {
                if (item.type === 1) {
                  this.Box1.push(item)
                } else if (item.type === 2) {
                  this.Box2.push(item)
                } else if (item.type === 3) {
                  this.Box3.push(item)
                } else if (item.type === 4) {
                  this.Box4.push(item)
                } else if (item.type === 5) {
                  this.Box5.push(item)
                } else if (item.type === 6) {
                  this.Box6.push(item)
                } else if (item.type === 7) {
                  this.Box7.push(item)
                } else if (item.type === 8) {
                  this.Box8.push(item)
                } else if (item.type === 9) {
                  this.Box9.push(item)
                }
              })
            }
          }
        })
      },
    },

  }
</script>

<style scoped>
  .box {
    background: #fff;
    height: 100%;
    padding: 0 30px 50px 30px;
  }

  .p_title {
    padding: 10px 40px 10px 20px;
    overflow: hidden;
    margin: 0;
  }

  .personalTable tr td {
    font-size: 14px;
    width: 200px;
  }

  .personalTable tr td:nth-child(1) {
    text-align: center;
  }

  .personalTable tr:nth-child(odd) {
    background: #eeeeee;
    height: 50px;
    line-height: 50px;
  }

  .personalTable tr:nth-child(even) {
    background: white;
    height: 50px;
    line-height: 50px;
  }
  span.span{
    display: inline-block;
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    padding:0 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: white;
    margin: 0 10px;
  }
  span.span1{
    font-size: 14px;
    padding:10px 20px;
    border-radius: 2px;
    margin: 0 10px;
    color: #999;
  }
</style>
